import CarSelect from "@/components/carSelect";
import {
  changeAddOrderList,
  changeCleanCar,
} from "@/store/modules/coffeeOrder";
import { orderType } from "@/type/coffeeType";
import { getTime } from "@/utils/getTime";
import { Button, Modal } from "antd";
import React, { FC, memo } from "react";
import { useDispatch } from "react-redux";
import { ShowCarWrapper } from "./style";

interface IProp {
  isShow: any;
  foo: Function;
  coffeeCar: orderType[];
}

const ShowCar: FC<IProp> = memo((props) => {
  const { isShow, foo, coffeeCar } = props;

  const dispatch = useDispatch();

  const handleOk = async () => {
    foo(false);
    (await coffeeCar.length) && dispatch(changeAddOrderList(getTime()));
    dispatch(changeCleanCar());
  };
  const handleCancel = () => {
    foo(false);
  };

  const clean = () => {
    dispatch(changeCleanCar());
  };

  const carTitle = () => {
    if (coffeeCar.length) {
      return (
        <div
          style={{
            display: "flex",
            alignItems: "center",
            marginBottom: "10px",
          }}
        >
          <span style={{ flex: 1, fontSize: "25px" }}>
            共{coffeeCar.length}杯
          </span>
          <Button
            onClick={() => {
              clean();
            }}
          >
            清空
          </Button>
        </div>
      );
    } else {
      return <h2>当前无咖啡~~</h2>;
    }
  };

  return (
    <ShowCarWrapper>
      <Modal
        className="modal"
        open={isShow}
        onOk={handleOk}
        onCancel={handleCancel}
        okText="下单"
        cancelText="继续买"
        closable={false} // 是否显示右上角X图标
      >
        <div className="title">{carTitle()}</div>
        <div>
          {coffeeCar.map((item, index) => {
            return (
              <div key={index}>
                <CarSelect item={item} />
              </div>
            );
          })}
        </div>
      </Modal>
    </ShowCarWrapper>
  );
});

export default ShowCar;
